(function(){
    function Table(){
        this.box=document.getElementById("box");
        this._name=document.getElementById('name');
        this.message=document.getElementById("message");
        this.btn=document.getElementById("btn");
    }
    /*Table.prototype.ajax=function(obj){
            obj.method=obj.method.toUpperCase()||"POST";
            obj.url=obj.url||"";
            obj.async=obj.async||true;
            obj.data=obj.data||{};
            obj.beforeSend=obj.beforeSend||function(){};
            obj.requestComplete=obj.requestComplete||function(){};
            obj.responseSuccess=obj.responseSuccess||function(){};
            obj.error=obj.error||function(){};
            if(window.XMLHttpRequest)
            {
                var xhr=new XMLHttpRequest();
            }else{
                var xhr=new ActiveXObject("Microsoft,XMLHTTP");
            }
            var arr=[];
            var data="";
            for(var i in obj.data)
            {
                arr.push(i+"="+obj.data[i]);
            }
            data=arr.join("&");
            console.log(data);
            obj.beforeSend();
            if(obj.method.toUpperCase()=="POST"){
                xhr.open("POST",obj.url,obj.async);
                xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
                xhr.send(data);
            }else{
                xhr.open("GET",obj.url+"key?="+Math.random()+"&"+data,obj.async);
                xhr.send();
            }
            xhr.onreadystatechange=function(){
                if(xhr.readyState==4)
                {
                    obj.requestComplete();
                    if(xhr.status==200)
                    {
                         // xhr.responseText;
                        obj.responseSuccess(xhr.responseText);
                    }
                }else if(xhr.status==404)
                {
                    obj.error();
                }
            }
        }*/

    Table.prototype.ajax=function(opt){
            opt.method = opt.method.toUpperCase()||"POST";
            opt.url = opt.url||"";
            opt.data = opt.data||{};
            opt.async = opt.async||true;
            opt.success = opt.success||function(){};
            opt.error = opt.error||function(){};
            opt.complete = opt.complete||function(){};
            opt.beforeSend = opt.beforeSend||function(){};

            var xhr;
            if(window.XMLHttpRequest){
                xhr = new XMLHttpRequest();
            }else{
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }

            var params = [];
            for(var i in opt.data){
                params.push(i+"="+opt.data[i]);
            }
            var data = params.join('&');
            opt.beforeSend();
            if(opt.method == "POST"){
                xhr.open('POST',opt.url,opt.async);
                xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
                // console.log(data);  
                xhr.send("name=qed&message=qeqdr");
            }else{
                xhr.open("GET",opt.url+"?key="+Math.random()+"&"+data,opt.async);
                xhr.send();
            }
            xhr.onreadystatechange = function(){
                if(xhr.readyState == 4){
                    opt.complete();
                    if(xhr.status==200){
                        var json=JSON.parse(xhr.responseText);
                        opt.success(json);
                    }else if(xhr.status == 404){
                        //xhr.statusText错误信息
                        opt.error(json);
                    }
                }
            }

        }

    Table.prototype.render=function(json){
        var html="";
        // console.log(json.length);
        for(var i=0;i<json.length;i++)
        {
            html+="<li><p>"+json[i].name+"</p><div><span>"+json[i].message+"</span><input type=\"hidden\" value=\""+json[i].id+"\" /></div></li>";
        }
        this.box.innerHTML=html;
    }

    var table=new Table();
    table.ajax({
        method:"get",
        url:"./php/getData.php",
        async:true,
        success:function(json){
            table.render(json);
        }
    })


    table.btn.onclick=function(){
        table.ajax({
            method:"get",
            url:"./php/insert.php",
            async:true,
            data:{name:table._name.value,message:table.message.value},
            success:function(json){
                table.render(json);
            }
        })
        table._name.value="";
        table.message.value="";
    }

    table.box.onclick=function(event){
        var e=event||window.event;
        var target=e.target||e.srcElement;
        if(target.nodeName.toUpperCase()=="SPAN")
        {
            var val=target.innerHTML;
            target.outerHTML="<input type=\"text\" value=\""+val+"\"><button class=\"edit\">确认修改</button><button class=\"del\">确认删除</button>";
        }
        if(target.className=="edit"){
            var content=target.previousSibling.value;
            var id=target.nextSibling.nextSibling.value;
            table.ajax({
            method:"get",
            url:"./php/edit.php",
            async:true,
            data:{id:id,message:content},
            success:function(json){
                table.render(json);
            }
        })
        }
        if(target.className=="del"){
            var id=target.nextSibling.value;
            table.ajax({
            method:"get",
            url:"./php/del.php",
            async:true,
            data:{id:id},
            success:function(json){
                table.render(json);
            }
        })
        }
    }



}());